<template>
  <view>
    <nav-bar :page-title="lang.pageName"/>
    <view :class="['padding-30', locale]">
      <!-- Store Info Section -->
      <view class="card column gap-40">
        <view class="flex-center gap-20">
          <image :src="storeDetails.logo" class="radio-20 store-logo"/>
          <view class="text-28 color-grey column gap-8">
            <view class="common-title text-color">{{ storeDetails.name }}</view>
            <view @longpress="copyFun(storeDetails.phone)">{{ storeDetails.phone }}</view>
            <view>{{ storeDetails.address }}</view>
            <!-- TODO 链接接口后发布-->
<!--            <view class="flex-center gap-20">-->
<!--              <u-icon name="edit-pen" color="#999" size="18" @click="updateAgentProfit = true"/>-->
<!--              <view>{{ getPrice(storeDetails.agent_profit) }}</view>-->
<!--            </view>-->
          </view>
        </view>

        <!-- Sales Statistics -->
        <view class="flex-between color-grey text-28">
          <view class="column-center gap-8">
            <view>{{ lang.salesStats['todaySales'] }}</view>
            <view class="text-34 text-color">{{ getPrice(storeDetails.today_sales) }}</view>
          </view>
          <view class="column-center gap-8">
            <view>{{ lang.salesStats['monthSales'] }}</view>
            <view class="text-34 text-color">{{ getPrice(storeDetails.month_sales) }}</view>
          </view>
          <view class="column-center gap-8">
            <view>{{ lang.salesStats['totalSales'] }}</view>
            <view class="text-34 text-color">{{ getPrice(storeDetails.total_sales) }}</view>
          </view>
        </view>
      </view>

      <!-- Machines List -->
      <view class="card">
        <view class="head-title margin-bottom-20">{{ lang.deviceInfo['title'] }}</view>
        <view v-for="(item, index) in storeDetails.machines" :key="index" class="machine-item">
          <view class="flex-center gap-20">
            <image class="icon-90" src="/static/agent/device.png" mode="aspectFit"/>
            <view class="column gap-8">
              <view>{{ item.name || lang.deviceInfo['name'] }}</view>
              <view>{{ item.device_id }}</view>
            </view>
          </view>
          <view v-if="storeDetails.machines.length >= 2 && index !== storeDetails.machines.length - 1" class="line"/>
        </view>
      </view>

      <!-- User Info -->
      <view class="card">
        <view class="head-title margin-bottom-20">{{ lang.storeStaff['title'] }}</view>
        <view class="flex-center gap-20">
          <view>
            <image :src="storeDetails.user.avatarUrl" class="user-avatar"/>
          </view>
          <view class="column gap-8 default-text color-grey">
            <view class="text-color common-title">{{ storeDetails.user.nickname }}</view>
            <view>UID:{{ storeDetails.user.id }}</view>
            <view>{{ storeDetails.user.phone }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 修改代理商利润 -->
    <confirm-popup
        :show="updateAgentProfit" :title="lang.updateAgentProfit['title']"
        @update:show="updateAgentProfit = false" @confirm="onUpdateAgentProfitConfirm"
    >
      <label for="profit" class="flex-center default-text">
        {{ `${lang.updateAgentProfit['profit']}` }}
        <input v-if="updateAgentProfit" type="number" id="profit" class="ltr paper-input"
               :placeholder="lang.updateAgentProfit['percentage']" v-model="agentProfit"/>
        {{ '%' }}
      </label>
    </confirm-popup>
  </view>
</template>
<script lang="ts">
import NavBar from "@/components/nav-bar/nav-bar.vue";
import {copyFun, getPrice} from "@/utils/utils";
import {Stores} from "@/types/agent/stores";
import ConfirmPopup from "@/components/confirmPopup/confirmPopup.vue";

export default {
  name: "StoreDetails",
  components: {ConfirmPopup, NavBar},
  data() {
    return {
      storeDetails: {} as Stores,
      updateAgentProfit: false,
      agentProfit: null as number | null,
    }
  },
  computed: {
    lang() {
      return this.$t('agentPages.storeDetails')
    },
  },
  onLoad(query?: AnyObject) {
    console.log(JSON.parse(decodeURIComponent(query.store)))
    if (query.store) {
      this.storeDetails = JSON.parse(decodeURIComponent(query.store));
    }
  },
  methods: {
    getPrice,
    copyFun,
    // 修改代理商利润
    onUpdateAgentProfitConfirm() {
      console.log("agentProfit =--=", this.agentProfit)
      this.updateAgentProfit = false
    }
  }
}

</script>
<style lang="scss">
.store-logo {
  width: 160rpx;
  height: 160rpx;
}

.machines-list {
  margin-bottom: 30rpx;

  .machine-item {
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;
  }
}


.user-avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
}

.paper-input {
  margin: auto 20rpx;
  width: 50%;
  text-align: center;
  height: 80rpx;
  background: #f5f5f5;
  border: 1rpx solid #e0e0e0;
  border-radius: 16rpx;
  padding: 0 24rpx;
  font-size: 32rpx;

  &.price-input:focus {
    border-color: #007AFF;
    background: #fff;
  }
}
</style>
